<template>
  <el-container class="layout-container-data" style="height: 100%">
    <el-aside width="200px">
      <el-menu :default-openeds="['1', '2']">
        <el-menu-item index="1">
          <el-icon>
            <DataLine />
          </el-icon>
          <span>
            <router-link to="/dataanalysis">数据统计</router-link>
          </span>
        </el-menu-item>

        <el-menu-item index="2">
          <el-icon>
            <Plus />
          </el-icon>
          <span>
            <router-link to="/dataanalysis/adddata">新增数据</router-link>
          </span>
        </el-menu-item>

        <el-menu-item index="3">
          <el-icon>
            <Edit />
          </el-icon>
          <span>
            <router-link to="/dataanalysis/editdata">编辑数据</router-link>
          </span>
        </el-menu-item>

        <el-menu-item index="4">
          <el-icon>
            <Edit />
          </el-icon>
          <span>
            <router-link to="/dataanalysis/editdata2">编辑数据2</router-link>
          </span>
        </el-menu-item>

      </el-menu>
    </el-aside>

    <el-container>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script setup>
import { Menu as IconMenu, DataLine, Plus, Edit } from '@element-plus/icons-vue'

</script>

<style scoped>
.layout-container-data .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-data .el-aside {
  color: var(--el-text-color-primary);
  /* background: var(--el-color-primary-light-8); */
}

.layout-container-data .el-menu {
  border-right: none;
}

.layout-container-data .el-main {
  padding: 0;
}

.layout-container-data .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
